added stats charts in xy-chart #75
Conversation
| @@ -15,6 +15,8 @@ import { | |||
| LineSeries, | |||
| PointSeries, | |||
| StackedBarSeries, | |||
| BoxPlotSeries, | |||
There was a problem hiding this comment.
since this file is getting so big I think it'd be good to start moving the examples into their own files. I did this with <StackedAreaSeries />, could we do that here?
There was a problem hiding this comment.
sounds good! I moved them out as a separate file
| description: 'Box Plot Example', | ||
| example: () => { | ||
| const boxPlotData = statsData.map(s => s.boxPlot); | ||
| const values = boxPlotData.reduce((r, e) => r.push(e.min, e.max, ...e.outliers) && r, []); |
There was a problem hiding this comment.
nice concise way to write this 👌
| <YAxis numTicks={4} /> | ||
| <BoxPlotSeries | ||
| data={boxPlotData} | ||
| label="Test" |
There was a problem hiding this comment.
I removed the label prop earlier this week! unnecessary now :)
| /> | ||
| <BoxPlotSeries | ||
| data={boxPlotData} | ||
| label="Test" |
| <YAxis numTicks={4} /> | ||
| <ViolinPlotSeries | ||
| data={violinData} | ||
| label="Test" |
| @@ -0,0 +1,88 @@ | |||
| import React from 'react'; | |||
| import PropTypes from 'prop-types'; | |||
| import { Group } from '@vx/group'; | |||
| const offsetValue = horizontal ? y : x; | ||
| const valueScale = horizontal ? xScale : yScale; | ||
| const boxWidth = offsetScale.bandwidth(); | ||
| const actualyWidth = Math.min(MAX_BOX_WIDTH, boxWidth); |
|
|
||
| const propTypes = { | ||
| data: violinPlotSeriesDataShape.isRequired, | ||
| label: PropTypes.string.isRequired, |
|
|
||
| const defaultProps = { | ||
| boxWidth: null, | ||
| stroke: '#000000', |
There was a problem hiding this comment.
I would use colors.darkGray or colors.black which aren't quiiiite black. most designers have told me to never use pure black ... some dark gray instead is more visually appealing.
| const offsetValue = horizontal ? y : x; | ||
| const valueScale = horizontal ? xScale : yScale; | ||
| const boxWidth = offsetScale.bandwidth(); | ||
| const actualyWidth = Math.min(MAX_BOX_WIDTH, boxWidth); |
|
|
||
| import { boxPlotSeriesDataShape } from '../utils/propShapes'; | ||
|
|
||
| const propTypes = { |
There was a problem hiding this comment.
I think for renderTooltip you'll have to add onMouseMove, onMouseLeave, and onClick handlers here
conglei
force-pushed
the
conglei-stats-xychart
branch
from
c979ae1 to
6fbc442
Compare
1 similar comment
|
dope! thanks for adding this 💯 should be able to cut a release later today |
This PR
<ViolinPlotSeries/>and example<BoxPlotSeries/>and exampleTODO